<template>
    <div class="search_fixed">
      <div class="search_wrap">
        <span @click="back">返回</span>
        <div  class="search">
          <p v-show="search_val">{{search_val}}</p>
          <form action="" @submit.prevent="search">
            <input maxlength="12" id="input" @focus="get_focus" v-model="val_" :placeholder="defaultSearch" ref="input" type="search">
          </form>
          <b  @click="search"></b>
        </div>
      </div>
      <div class="select_wrap" v-if="brand_data.length">
        <div class="brand_wrap">
          <b>品牌： </b>
          <ul ref="brand_scroll">
            <li @click="select_brand" :data-id3="item.bid" v-for="(item , index) in brand_data"
                :class="item.bid==bid?'active':''">{{item.names}}
            </li>
          </ul>
        </div>
        <div class="spec_wrap">
          <b>规格： </b>
          <ul ref="spec_scroll">
            <li @click="select_spec" :data-id3="item.sid" v-for="(item , index) in spec_data"
                :class="item.sid==sid?'active':''">{{item.size}}
            </li>
          </ul>
        </div>
      </div>
        <div v-if="!isSearch&&items_data.length>0" class="items_wrap">
          <item-list :data="items_data" @selectItem="selectItem"></item-list>
          <p v-show='isloading' class="loading">加载中...</p>
          <p v-show="!is_more" class="no_more">没有更多了</p>
        </div>
        <div class="search_hot_wrap" v-show="isSearch||items_data.length===0" >
          <p  v-show="!isloading&&!isSearch&&items_data.length===0">没找到您要的结果...</p>
          <p  class="loading" v-show="isloading&&items_data.length===0">加载中...</p>
          <div class="words_wrap" v-show="(isSearch||items_data.length===0)&&!isloading">
            <p>热门搜索</p>
            <ul>
              <li @click="select_search(item)" v-for="(item,index) in words">{{item}}</li>
            </ul>
          </div>

          <div v-show="recentlySearch.length&&(isSearch||items_data.length===0)&&!isloading" class="recentlySearch_wrap ">
            <p>最近搜索</p>
            <ul>
              <li @click="select_search(item)" v-for="(item,index) in recentlySearchReverse">{{item}}</li>
            </ul>
            <div @click="clear_loaclStorage">清除搜索记录</div>
          </div>
        </div>
      <router-view></router-view>
    </div>
</template>

<script type="text/ecmascript-6">
  import itemList from 'components/item_list'
  import {search_items, common_search_word} from 'api/search'
  import {w_scroll_top} from 'assets/dom/dom'
  import {get_cookie,get_localStorage,set_localStorage} from 'assets/cookie/cookie'
  import {mapGetters, mapMutations} from 'vuex'
  import {stop_slider} from 'assets/base/base'


  export default {
    name: 'search',
    data() {
      return {
        isSearch:false,
        items_data: [],
        isloading: false,
        isInit: true,
        page: 1,
        val_: "",
        is_more: true,
        words: [],
        recentlySearch:[],
        search_val:'',
        defaultSearch:'津猫',
        spec_data:[],
        brand_data:[],
        bid:0,
        sid:0
      }
    },
    props: [],
    activated() {
      this.search_words()
      this.recentlySearch=get_localStorage('recentlySearch')
      this.isSearch=false
      this.val_=this.searchVal
      this.search()
      this.items_data=[]
      this.brand_data=[]
      this.bid=0
      this.cid=0
    },
    mounted() {
      this.brand_window_scroll()
    },
    computed: {
      recentlySearchReverse(){
        return this.recentlySearch.reverse()
      },
      ...mapGetters(['searchVal'])
    },
    methods: {
      select_spec(e){
        if(!this.isloading){
          this.isSearch=false
          this.is_more=true
          this.page=1
          this.items_data=[]
          clearInterval(this.interval)
          const id_ = e.target.getAttribute("data-id3");
          this.sid = id_
          this.scroll_center_interval(e.target, this.$refs.spec_scroll)
          this.search_items(true)
        }

      },
      select_brand(e){
        if(!this.isloading){
          this.isSearch=false
          this.is_more=true
          this.page=1
          this.items_data=[]
          clearInterval(this.interval)
          const id_ = e.target.getAttribute("data-id3")
          this.bid = id_
          this.sid = 0
          this.$refs.spec_scroll.scrollLeft=0
          this.scroll_center_interval(e.target, this.$refs.brand_scroll)
          this.search_items(true)
        }

      },
      selectItem(id) {
        this.$router.push({
          path: '/search/detial',
          query: {
            itemId: id
          }
        })
      },
      get_focus(){
        w_scroll_top(0)
        this.items_data=[]
        this.brand_data=[]
        this.spec_data=[]
        this.bid=0
        this.sid=0
        this.isSearch=true
        this.search_val=''
        this.page=1
      },
      clear_loaclStorage(){
        this.recentlySearch=[]
        set_localStorage('recentlySearch',[])
      },
      search_words() {
        common_search_word({}).then((res) => {
          if (res.status === 200) {
            const _res = res.data
            if (_res.resStatus === 0) {
              this.words = _res.data
            }
          }
        })
      },
      brand_window_scroll() {
        this.$parent.scroll_name_search = () => {
          if ((document.body.clientHeight - document.documentElement.clientHeight <= w_scroll_top() + 320)) {
            if (this.$route.path === "/search" && this.items_data.length && this.is_more&& !this.isloading) {
              this.search_items()
            }
          }
        }
        window.removeEventListener("scroll", this.$parent.scroll_name_search)
        window.addEventListener("scroll", this.$parent.scroll_name_search)

      },
      scroll_center_interval(c_element, p_element) {
        const time = 100;
        const num = 20;
        const scroll_left = ((c_element.offsetLeft - p_element.scrollLeft) + c_element.offsetWidth / 2) - document.documentElement.offsetWidth / 2
        const target_left = p_element.scrollLeft + scroll_left
        let ulWidth =  p_element.scrollWidth;

        this.interval = setInterval(() => {
          const now_left = p_element.scrollLeft
          if (scroll_left >= 0 && (now_left >= target_left || (ulWidth - p_element.offsetWidth) <= now_left)) {
            clearInterval(this.interval)
            return;
          }
          if (scroll_left < 0 && (now_left <= target_left || (now_left === 0))) {
            clearInterval(this.interval)
            return;
          }
          p_element.scrollLeft = scroll_left > 0 ? Math.ceil(now_left + (scroll_left / num)) : Math.floor(now_left + (scroll_left / num))
        }, time / num)
      },
      select_search(item) {
        this.val_=item
        this.search()
      },
      search(){
        this.page=1
        this.isSearch=false
        this.is_more=true
        if(this.val_===''){
          this.val_=this.defaultSearch
        }
        this.val_=this.val_.replace(/^\s*|\s*$/g, "")
        this.search_val=this.val_
        if(this.val_){
          this.$refs.input.blur()
          let recently_arr=get_localStorage('recentlySearch')
          if(recently_arr.length>9){
            recently_arr.shift()
          }
          recently_arr.push(this.val_)
          this.recentlySearch=recently_arr
          set_localStorage('recentlySearch',recently_arr)
          this.search_items(true)
        }else{
          this.setHint({
            text:'请输入内容再搜索',
            ok:false,
            isHint:true
          })
          this.$refs.input.focus()
        }
      },
      search_items(first) {
        this.isloading = true
        search_items({
          bid :this.bid,
          sid :this.sid,
          token:get_cookie('key'),
          search: this.val_.replace(/^\s*|\s*$/g, ""),
          page: this.page
        }).then((res) => {
          if (res.status === 200) {
            const _res = res.data
            if (_res.resStatus === 0) {
              console.log(_res.data)
              this.brand_data=_res.data.brand
              this.spec_data=_res.data.specs
              this.is_more = _res.data.isMore
              if (this.is_more) {
                this.page++
              }
              if (first) {
                this.items_data = _res.data.list
              } else {
                this.items_data = this.items_data.concat(_res.data.list)
              }

            } else {
              this.items_data = [];
            }
            this.isloading = false
          }
        }, () => {
          this.items_data = [];
          this.isloading = false
        })
      },
      back(){
        this.$router.back()
      },
      ...mapMutations({
        setSearchVal: 'SET_SEARCH_VAL',
        setHint:'SET_HINT'
      })
    },
    components: {
      itemList
    },
    watch: {
    }
  }
</script>

<style scoped lang="scss">

  .fade-enter-active /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }

  .fade-enter-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 1;
    transition: all 0.35s;
  }
  .items_wrap{
   padding-bottom: 20px;
    margin-top: 118px;
  }
  .search_hot_wrap{
    margin-top: 60px;
    >.loading{
      margin-top: 120px;
      color: #999;
    }
  }
  .words_wrap {
    width: 90%;
    margin: 0 auto;
    > p {
      text-align: left;
      margin-left: 15px;
      margin-top: 11px;
      color: #aaa;
    }
    > ul {
      overflow: hidden;
      > li {
        float: left;
        padding: 8px;
        margin-left: 15px;
        margin-top: 8px;
        border: 1px solid #aaa;
        border-radius: 5px;
        color: #555;
      }
    }
  }
  .select_wrap{
    position: fixed;
    width: 100%;
    top:46px;
    z-index: 16;
    background: #fff;
    text-align: left;
    padding-bottom: 5px;
  }
  .brand_wrap {
    margin-top: 5px;
    overflow: hidden;
    height: 30px;
    > b {
      float: left;
      height: 30px;
      line-height: 30px;
      margin-left: 11px;
      font-weight: bold;
    }
    > ul {
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      white-space: nowrap;
      padding-bottom: 35px;
      > li {
        text-align: center;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }

  .spec_wrap {
    margin-top: 5px;
    overflow: hidden;
    height: 30px;
    > b {
      float: left;
      height: 30px;
      line-height: 30px;
      margin-left: 11px;
      font-weight: bold;
    }
    > ul {
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      white-space: nowrap;
      padding-bottom: 35px;
      > li {
        text-align: center;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }
  .recentlySearch_wrap {
    width: 90%;
    margin: 20px auto;
    > p {
      text-align: left;
      margin-left: 15px;
      margin-top: 11px;
      color: #888;
    }
    > ul {
      overflow: hidden;
      > li {
        float: left;
        padding: 6px;
        margin-left: 15px;
        margin-top: 8px;
        border: 1px solid #aaa;
        border-radius: 5px;
        color: #aaa;
      }
    }
    >div{
      width: 80%;
      height: 30px;
      line-height: 30px;
      margin: 10px auto 0 auto;
      border: 1px solid #ddd;
      color: #aaa;
      border-radius: 5px;
    }
  }
  .active {
    background-color: #2096d4;
    border-radius: 4px;
    color: #fff;
  }
  .search_wrap{
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
    background-color: #25abea;
    padding-bottom: 6px;
    padding-top: 8px;
    max-width: 768px;
    min-width: 320px;
    >span{
      float: left;
      font-size: 13px;
      margin-top: 5px;
      margin-left: 10px;
      font-weight: bold;
      margin-right: 8px;
      padding-top: 5px;
      padding-bottom: 5px;
      letter-spacing: 2px;
      color: #eee;
    }
  }
  .search {
    overflow: hidden;
    position: relative;
    margin-right: 14px;
    height: 32px;
    >p{
      position: absolute;
      height: 28px;
      padding-left: 5px;
      padding-right: 5px;
      line-height: 28px;
      background: #aaa;
      left: 9px;
      top: 2px;
      color: #fff;
      border-radius: 3px;
      letter-spacing: 1px;
      font-size: 14px;
    }
    >form {
      background-color: #93d4f4;
      padding-top: 7px;
      border-radius:10px;
      padding-left: 10px;
      height: 33px;
      padding-right: 44px;
      input::-webkit-input-placeholder {
        color: #aaa;
      }
      input::-moz-placeholder {
        color: #aaa;
      }
      input:-moz-placeholder {
        color: #aaa;
      }
      input:-ms-input-placeholder {
        color: #aaa;
      }
      input[type=search]::-webkit-search-cancel-button {
        -webkit-appearance: none; //此处只是去掉默认的小×
      }
      input {
        width: 100%;
        height: 18px;
        line-height: 18px;
        outline: none;
        border: none;
        color: #fff;
        font-size: 14px;
        letter-spacing: 1px;
        background-color: transparent;
      }
    }
    > b {
      position: absolute;
      top: 0;
      right: 9px;
      width: 32px;
      height: 32px;
      background-image: url("../assets/img/22.png");
      background-size: 80% 80%;
      background-position-y: 42%;
      background-repeat: no-repeat;
      transition: transform 0.12s;
      cursor: pointer;
      &:active {

        transform: scale(1.2);
      }
    }
  }
  .loading{
    height: 30px;
    line-height: 30px;
    color: #aaa;
  }
  .no_more{
    height: 30px;
    line-height: 30px;
    color: #aaa;
  }
</style>
